<template>
    <div class="login_interface">
        <div class="login_center">
            <div class="login_section">
                <div class="title">分享科技,带动未来</div>
                <div class="login_submit">
                    <el-form :model="ruleForm" :rules="rules" ref="login" label-width="70px" class="demo-ruleForm">
                        <el-form-item label="用户名" prop="userName">
                            <el-input  type="text" v-model="ruleForm.userName" autocomplete="off" placeholder="请输入用户名" :maxlength="11" clearable>
                                <el-button slot="prepend" icon="el-icon-user-solid"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="passWord">
                            <el-input type="password" v-model="ruleForm.passWord" autocomplete="off" placeholder="请输入密码" show-password :maxlength="20" clearable>
                                <el-button slot="prepend" icon="el-icon-bank-card"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" class="butSubmit" @click="submitForm()">立即登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data () {
            return {
                ruleForm: {
                    userName: '',
                    passWord: ''
                },
                rules: {
                    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }]
                },
            }
        },
        methods: {
            submitForm () {
                this.$refs['login'].validate(valid => {
                   if (!valid) return false;
                   this.$http.get("./static/login.json").then(res =>{
                       if (res.status !== 200) return;
                       let userName = res.data.userName;
                       let passWord = res.data.passWord;
                       if (this.ruleForm.userName === userName && this.ruleForm.passWord === passWord) {
                           this.$message({
                               message: '登录成功',
                               type: 'success',
                               duration: 1000,
                               onClose: () =>{
                                   let information = {
                                       "username": res.data.userName,
                                       'role': res.data.role,
                                       'token': res.data.token
                                   }
                                   sessionStorage.setItem('information',JSON.stringify(information))
                                   this.$router.replace('/');//跳转到首页
                               }
                           })
                       } else {
                           return this.$message.error('输入的用户名或者密码有误');
                       }
                   }).catch(() =>{})
                });
            }
        }
    }
</script>

<style  lang="scss" scoped>
.login_interface {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0e528a url("../../assets/imgae/20201229111348.jpg") no-repeat center center/100% 100%;
    .login_center {
        width: 450px;
        height: 350px;
        border-radius: 10px;
        background: #032237;
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: .8;
        transform: translate(-50%,-50%);
        padding: 12px 24px;
        .login_section {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            .title {
                font-size: 32px;
                width: 100%;
                color: #ffffff;
                text-align: left;
                text-shadow:0 0 5px #fff,0 0 15px #fff,0 0 40px #fff ,0 0 70px #ff4400;
            }
            .login_submit {
                width: 100%;
                height: 280px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .demo-ruleForm {
                    padding: 12px 24px;
                }
            }
        }
    }
    .butSubmit {
        width: 200px;
        background:linear-gradient(90deg,rgba(240,100,60,1) 0%,rgba(255,150,90,1) 100%);
        border: none;
    }
    .butSubmit:hover {
        background:linear-gradient(90deg, rgba(255,150,90,1) 0%, rgba(240,100,60,1) 100%);
    }
    /deep/ .el-form-item__label {
        color: #fff;
    }
}
</style>